import React, { FC, useEffect } from 'react';
import Menu from '@/pages/Menu';
import _ from 'lodash';
import { menuConfigFull } from '@/config/menuConfig';
import Fullpage from 'fullpage.js';
import { WOW } from 'wowjs';

const FullPageIndex: FC = () => {
  useEffect(() => {
    const fn = new Fullpage('#fullpage', {
      anchors: _.map(menuConfigFull, (item, key) => item.id),
      navigation: false,
      licenseKey: 'noKey',
      scrollBar: true,
      fadingEffect: true,
      afterRender: function () {
        const wow = new WOW({
          // 异步数据是否有效
          // 默认是true
          // 一般都是改成false,异步的数据不需要有动画
          // 并且如果为true的话,控制台会有Warning提示
          live: false,
        });
        wow.init();
      },
    });
    return () => {
      fn.destroy('all');
    };
  }, []);
  return (
    <>
      <Menu />
      <div id="fullpage">
        {_.map(menuConfigFull, (item, key) => {
          return (
            <div className="section" key={item.id}>
              <item.component />
            </div>
          );
        })}
      </div>
    </>
  );
};

export default FullPageIndex;
